<template>
  <div class="NavBar">
    <van-nav-bar >
      <div slot="title" class="title">{{title}}</div>
      <van-icon size="22" name="/img/48.png" slot="left" @click="goBack"  />
      <div slot="right">{{right}}</div>
    </van-nav-bar>
  </div>
</template>

<script>
import { NavBar, Icon } from "vant";
Vue.use(NavBar).use(Icon);
export default {
  props: {
    title: {
      type: String,
      default: "安妮"
    },
    right: {
      type: String,
      default: ""
    }
  },
  name: "NavBar",
  data() {
    return {};
  },
  components: {},
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less" scoped>
.NavBar {
  .title {
    font-size: 16px;
    font-family: PingFangSC-Medium;
    font-weight: 700;
    color: rgba(48, 48, 48, 1);
  }
}
</style>

